<template>
    <div class="Teachingcentercoursedetails">
        <div class="Teachingcentercoursedetails-head">
            <label>
                <span>课程详情</span>
            </label>
            <label v-if="ismaster">
                <span @click="Modifyprogram">修改课程</span>
            </label>
        </div>
        <div class="Teachingcentercoursedetails-content" v-for="(item,index) in Classdetails" :key="index">
            <div class="Teachingcentercoursedetails-content-left">
                <label :style="{backgroundImage: 'url(' + item.cover + ')'}">
                    <div class="Teachingcentercoursedetails-content-left-Isend" v-if="Isend">
                        <span v-if="item.classroom_type == 'online_video'">
                            <img src="/images/icon@2x.png" alt="">
                        </span> 
                        <span class="left-tltie" v-if="item.classroom_type == 'online_video'">直播回放</span>
                        <span class="obj" v-if="item.classroom_type == 'online_video'">
                            <img src="/images/组 13@2x.png" @click="Liveplayback(item)" alt="">
                        </span>
                    </div>
                    <div class="Teachingcentercoursedetails-content-left-infos" v-else-if="liveonstate == 1">
                        <span>
                            <img src="/images/椭圆 30@2x.png" alt="">
                        </span> 
                        <span class="left-tltie">即将开播</span>
                        <p>距离开课还剩<span>{{day}}</span>天<span>{{hr}}</span>时<span>{{min}}</span>分<span>{{sec}}</span>秒</p>
                        <span class="toInfos" @click="ToLiveRoom(item)">进入课堂></span>
                    </div>
                    <div class="Teachingcentercoursedetails-content-left-Isend" v-else-if="liveonstate == 2">
                        <span>
                            <img src="/images/pc端-正在直播gif.gif" alt="">
                        </span> 
                        <span class="left-tltie">正在直播</span>
                        <span class="toInfos" @click="ToLiveRoom(item)">进入课堂></span>
                    </div>
                </label>
            </div>
            <div class="Teachingcentercoursedetails-content-right">
                <label class="ClassInfos">
                    <span>{{item.title}}</span>
                </label>
                <label class="typeimgsa">
                    <img src="/images/视频直播icon@2x.png" alt="" v-if="item.classroom_type == 'online_video'">
                    <img src="/images/语音直播@2x.png" alt="" v-else>
                </label>
                <label>
                    <span class="Teachingcentercoursedetails-language">{{item.language}}</span>
                </label>
                <label class="ClassInfosmember">
                    <span>观看人数:</span>
                    <span>{{item.map.appointmentCount}}</span>
                    <span v-if="isBenren">收益：</span>
                    <span v-if="isBenren">{{item.map.groupinfo.earnings}}</span>
                </label>
                <label class="ClassInfostimes">
                    <span>{{item.update_time}}</span>
                    <span>{{item.start_time}}-{{item.end_time}}</span>
                </label>
                
            </div>
        </div>
        <div class="Teachingcentercoursedetails-footes">
            <div>
                <p>所在班级</p>
                <div class="footes-infos" v-for="(item,index) in Classdetails" :key="index" @click="Toclass(item)">
                    <label>
                        <img :src="item.map.groupinfo.faceUrl" alt="">
                    </label>
                    <label>
                        <label class="info-Class">
                            <span>{{item.map.groupinfo.group_name}}</span>
                        </label>
                        <label>
                            <span>开课数</span>
                            <span style="width:10%">{{item.map.appointmentCount}}</span>
                            <span style="width:40%">学员数</span>
                            <span style="width:10%">{{item.map.groupinfo.online_num}}</span>
                        </label>
                        <label>
                            <span style="width:50%">适用人群：</span>
                            <span>{{item.map.groupinfo.age_grade}}</span>
                        </label>
                        <label>
                            <span style="width:auto">创建时间：{{item.create_time}}</span>
                        </label>
                    </label>
                    
                </div>
                
            </div>
            <div class="classteacher">
                <p>主讲老师</p>
                <label v-for="(item,index) in Classdetails" :key="index" @click="Goteacherdetails(item.map.userinfo.user_id)">
                    <label>
                        <span><img :src="item.map.userinfo.avatar" alt=""></span>
                    </label>
                    <label class="classteacher-info">
                        <span>{{item.map.userinfo.nick_name}}</span>
                        <span>{{item.map.userinfo.country}}·{{item.map.userinfo.city}}</span>
                    </label>
                    <label>
                        <span  style="cursor: pointer;">></span>
                    </label>
                </label>
            </div>
        </div>
        <div class="introduction">
            <span>课程相关图片</span>
            <ul v-if="introductionImg[0].length == 0">
                没有图片
            </ul>
            <ul v-else>
                <li v-for="(item,index) in introductionImg[0]" :key="index" >
                    <img :src="item" alt="" v-image-preview>
                </li>
            </ul>
        </div>
        <div class="lecturersdetialcommit">
            <span>课程评价</span>
             <ul class="lecturersdetial-commit">
                    <li v-for="(comititem,comitindex) in Commits" :key="comitindex">
                        <h3>{{comititem.map.masterAppointmentInfo.title}}</h3>
                        <label><span>{{comititem.create_time}}</span></label>
                        <div class="commit-cont">
                            <div class="comments-content">
                                <label>
                                    <label>
                                        <img :src="comititem.map.userinfo.avatar" alt="">
                                    </label>
                                    <label>
                                        <span>{{comititem.map.userinfo.nick_name}}</span>
                                        <span>{{comititem.content}}</span>
                                        <span>2小时前</span>
                                    </label>
                                </label>
                            </div>
                            <div class="reply-content" v-if="comititem.map.subComment.length!=0">
                                <label v-for="(respal,replayindex) in comititem.map.subComment" :key="replayindex">
                                    <label>
                                        <img :src="respal.map.replyinfo.avatar" alt="">
                                    </label>
                                    <label class="reply-infos">
                                        <span>{{respal.map.userinfo.nick_name}}</span>
                                        <span style="color:#C2C2C2">回复</span>
                                        <span>{{respal.map.replyinfo.nick_name}}</span>
                                        <span>{{respal.content}}</span>
                                        <span class="toreplys" @click="ToRepalsy(notes)">回复</span>
                                        <span class="replaystimed">2小时前</span>
                                        
                                    </label>
                                </label>
                            </div> 
                        </div>
                    </li>
                </ul>
        </div>
    </div>
</template>
<script>
export default {
    name:'Teachingcentercoursedetails',
    data(){
        return{
            id:this.$route.query.id,
            Isend:this.$route.query.Isend,
            Classdetails:[],
            languageEn:[
                {"Estonian":"爱沙尼亚语"},
				{"Arabic":"阿拉伯语"},
				{"Bulgarian":"保加利亚语"},
				{"polish":"波兰语"},
				{"Danish":"丹麦语"},
				{"German":"德语"},
				{"Russian":"俄语"},
				{"Traditional Chinese":"繁体中文"},
				{"French":"法语"},
				{"Finnish":"芬兰语"},
				{"Korean":"韩语"},
				{"Dutch":"荷兰语"},
				{"Czech":"捷克语"},
				{"romanian":"罗马尼亚语"},
				{"Portuguese":"葡萄牙语"},
				{"Japanese":"日语"},
				{"Swedish":"瑞典语"},
				{"slovenian":"斯洛文尼亚语"},
				{"Thai":"泰语"},
				{"Spanish":"西班牙语"},
				{"Greek":"希腊语"},
				{"hun":"匈牙利语"},
				{"Italian":"意大利语"},
				{"English":"英语"},
				{"Vietnamese":"越南语"},
				{"cantonese":"粤语"},
				{"Chinese":"中文"}
            ],
            day: 0,//天
            hr: 0,//时
            min: 0,//分
            sec: 0,//秒
            timers:'',
            Thetheme:[
                {"Scene/Restaurant":"场景/餐馆"},
                {"Scene/Post Office":"场景/邮局"},
                {"Scene/Hospital and health scene":"场景/医院及健康场景"},
                {"Scene/Hotel":"场景/酒店"},
                {"Scene/Shopping mall":"场景/商场购物"},
                {"Scene/Work and work scenes":"场景/商场工作和上班场景购物"},
                {"Scene/Airport":"场景/机场"},
                {"Scene/Farm":"场景/农场"},
                {"Scene/Campus":"场景/校园"},
                {"Scene/Travel":"场景/旅行"},
                {"Scene/Supermarket":"场景/超市"},
                {"Scene/Drive":"场景/驾驶"},
                {"Scene/Wedding":"场景/婚礼"},
                {"Scene/Cinema":"场景/电影院"},
                {"Scene/Entertainment place":"场景/娱乐场所"},
                {"Scene/Gymnasium":"场景/体育馆"},
                {"Scene/Museum":"场景/博物馆"},
                {"Scene/Bar or KTV":"场景/酒吧或KTV"},
                {"Topic/Self introduction":"主题/自我介绍"},
                {"Topic/Learning and education":"主题/学习教育"},
                {"Topic/Talk about music":"主题/聊聊音乐"},
                {"Topic/Talk about family":"主题/聊聊家人"},
                {"Topic/Talk about dressing":"主题/聊聊穿着"},
                {"Topic/Talk about friends":"主题/聊聊朋友"},
                {"Topic/Talk about delicious food":"主题/聊聊美食"},
                {"Topic/Festivals and customs":"主题/节日和习俗"},
                {"Topic/Talk about variety show":"主题/聊聊综艺节目"},
                {"Topic/Talk about the near future plan":"主题/聊聊近期计划"},
                {"Topic/Talking about hobbies":"主题/聊聊爱好"},
                {"Topic/Talk about learning":"主题/聊聊学习"},
                {"Topic/Talk about TV series":"主题/聊聊电视剧"},
                {"Topic/Talk about movies":"主题/聊聊电影"},
                {"Topic/Talk about work":"主题/聊聊工作"},
                {"Topic/How to learn the language well":"主题/怎么学好这个语言"},
                {"Topic/About tourism":"主题/关于旅游"},
                {"Topic/Talk about geography":"主题/聊聊地理"},
                {"Topic/Talking about ideals":"主题/谈谈理想"},
                {"Topic/Talk about love":"主题/聊聊爱情"},
                {"Topic/Talk about the weather":"主题/聊聊天气"},
                {"Topic/Talk about some interesting things":"主题/聊一些趣事"},
            ],
            introductionImg:[],
            Commits:[],
            liveonstate:0,//直播状态
            unserinfo:JSON.parse(localStorage.getItem('userinfo')) == null?'':JSON.parse(localStorage.getItem('userinfo')),
            ismaster:false,
            isBenren:false,
            IsLogins:false,
        }
    },
    created(){
        this.Getclisd()
        this.Getcommits()
    },
    mounted(){
        this.countdown() 
        if(this.unserinfo == ''){
            this.IsLogins = false
        }else{
            this.IsLogins = true
        }
    },
    beforeDestroy() {
        clearInterval(this._interval)
     },
    methods:{
        Getclisd(){
            var data = {
                id :this.id,
                pageSize:1
            }
            this.$axios({
                method:'get',
                url:'http://101.37.66.151:8768/eg-api/user/masterAppointment/queryDetailsListPage',
                params:data,
            }).then((res) =>{
                console.log(res.data.data[0],'班级详情')
                this.Classdetails = res.data.data
                this.Classdetails.forEach(e => {
                    if(this.unserinfo.user_id == undefined){
                        this.isBenren = false
                    }else if(e.master_id == this.unserinfo.user_id){
                        this.isBenren = true
                    }
                    console.log(this.isBenren)
                    var tuimg = e.introduction_cover.split(',')
                    this.introductionImg.push(tuimg)
                    console.log(this.introductionImg)
                    this.timers = e.start_time
                    var stars = e.start_time
                    var entimes = e.end_time
                    var times = stars.substring(0, stars.indexOf(' '))//截取当前日期
                    var starttime =  stars.substring(11, 16)//截取开始时间
                    var endtime =  entimes.substring(11, 16)//截取结束时间
                    e['update_time'] = times
                    e['start_time'] = starttime
                    e['end_time'] = endtime
                    if(e.map.groupinfo['age_grade'] == 'University Student'){
                        e.map.groupinfo['age_grade'] = '大学生'
                    }else if(e.map.groupinfo['age_grade'] == 'Adult'){
                        e.map.groupinfo['age_grade'] = '青少年'
                    }
                    else if(e.map.groupinfo['age_grade'] == 'Childhood'){
                        e.map.groupinfo['age_grade'] = '儿童'
                    }else{
                        e.map.groupinfo['age_grade'] = '成人'
                    }
                    this.languageEn.forEach(function(j){
                        if(j[e['language']]){
                            e['language']=j[e['language']]
                        }
                            
                    })
                    this.Thetheme.forEach(is=>{
                        if(is[e['title']]){
                            e['title'] = is[e['title']]
                        }
                    })
                    if(this.unserinfo.user_id == undefined){
                        this.ismaster = false
                    }else if(e.mao.groupinfo.owner_id == this.unserinfo.user_id){
                        this.ismaster = true
                    }
                });
                console.log(this.Classdetails,'班级详情')
            }).catch((error) =>{
                console.log(error)
            })
        },
        countdown() {
            const end = Date.parse(this.timers);
            const now = Date.parse(new Date());
            const msec = end - now;
            const r = /^\+?[1-9][0-9]*$/; // 正整数
            // 如果判断不符合正则，则不是正整数不能提交
            if (!r.test(msec)) {
                // msec = Math.abs(msec)
                this.liveonstate = 2
                let day = parseInt(msec / 1000 / 60 / 60 / 24);
                let hr = parseInt(msec / 1000 / 60 / 60 % 24);
                let min = parseInt(msec / 1000 / 60 % 60);
                let sec = parseInt(msec / 1000 % 60);
                this.day = day
                this.hr = Math.abs(hr) > 9 ? Math.abs(hr) : '0' + Math.abs(hr);
                this.min = Math.abs(min) > 9 ? Math.abs(min) : '0' + Math.abs(min);
                this.sec = Math.abs(sec) > 9 ? Math.abs(sec) : '0' + Math.abs(sec);
                const that = this;
                this._interval = setTimeout(function () {
                    that.countdown()
                }, 1000)
            } else {
                this.liveonstate = 1
                let day = parseInt(msec / 1000 / 60 / 60 / 24);
                let hr = parseInt(msec / 1000 / 60 / 60 % 24);
                let min = parseInt(msec / 1000 / 60 % 60);
                let sec = parseInt(msec / 1000 % 60);
                this.day = day
                this.hr = hr > 9 ? hr : '0' + hr;
                this.min = min > 9 ? min : '0' + min;
                this.sec = sec > 9 ? sec : '0' + sec;
                const that = this;
                this._interval = setTimeout(function () {
                    that.countdown()
                }, 1000)
            }
        },
        Modifyprogram(item){//修改课程
            this.$router.push({path:'/views/Teachingcenters/Modifyprogram',query: {item: this.Classdetails}})
        },
        Goteacherdetails(userid){
            console.log(userid)
            if(this.IsLogins){
                this.$router.push({path:'/views/Teachingcenters/Teachersdetails',query: {userid: userid}})
            }else{
                this.$message('请先登陆在查看')
            }
            
        },
        Toclass(item){
            if(this.IsLogins){
                this.$router.push({path:'/views/Teachingcenters/Classdetails',query: {id: item.map.groupinfo.id}})
            }else{
                this.$message('请先登陆在查看')
            }
            
        },
        ToLiveRoom(item){
            console.log(item)
            if(this.IsLogins){
                if(item.classroom_type == 'online_video'){
                    if(item.map.userinfo.user_id == this.unserinfo.user_id){
                        this.$router.push({path:'/views/LivevideoRoom',query:{item: JSON.stringify(item)}})
                    }else{
                    this.$router.push({path:'/views/StudentbroadcastVideproom',query:{item: JSON.stringify(item)}})
                    }
                    
                }else{
                    if(item.map.userinfo.user_id == this.unserinfo.user_id){
                        this.$router.push({path:'/views/Voicebroadcast',query:{item: JSON.stringify(item)}})
                    }else{
                    this.$router.push({path:'/views/Studentvoice',query:{item: JSON.stringify(item)}})
                    }
                    
                }
            }else{
                this.$message('请登录在查看')
            }
            
            
        },
        Liveplayback(item){
            if(this.IsLogins){
                if(item.classroom_type == 'online_video'){
                    if(item.map.userinfo.user_id != this.unserinfo.user_id){
                        this.$router.push({path:'/views/Liveplayback',query:{item: JSON.stringify(item)}})
                    }  
                }else{
                    this.$message('语音直播无回放')
                }
            }else{
                this.$message('请先登录，在查看')
            }
            
        },
        Getcommits(){
            var data ={
                appointment_id:this.id,
                parent_id:0,
                pageSize:4,
            }
            this.$axios({
                method:'get',
                url:'http://101.37.66.151:8768/eg-api/user/masterComment/queryListPage',
                params:data,
            }).then((res) =>{
                console.log(res.data.data,'评论')
                this.Commits = res.data.data
            }).catch((error) =>{
                console.log(error)
            })
        }
    }
}
</script>
<style lang="less" scoped>
    .Teachingcentercoursedetails{
        position: relative;
        // width: 100%;//有左侧导航状态
        width: 116%;//五左侧导航状态
        background: #ffffff;
        border-radius: 20px;
        padding-bottom: 100px;
    }
    .Teachingcentercoursedetails-head{
        position: relative;
        width: 90%;
        height: 100px;
        margin: 0 auto;
        border-bottom: 1px solid #47CECF;
        display: flex;
        align-items: center;
        label{
            display: flex;
            width: 50%;
            height: 50px;
            &:first-child{
                color: #2DC7C8;
                font-size: 20px;
                line-height: 50px;
                font-weight: bold;
            }
            &:nth-child(2){
                justify-content: flex-end;
                span{
                    width: 30%;
                    text-align: center;
                    line-height: 50px;
                    background:rgba(45,199,200,1);
                    border-radius:30px;
                    color: #FFFFFF;
                    font-size: 14px;
                    cursor: pointer;
                }
            }
            
        }
    }
    .Teachingcentercoursedetails-content{
        position: relative;
        width: 88%;
        margin: 0 auto;
        height: 600px;
        margin-top: 40px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #f1f1f1;
    }
    .Teachingcentercoursedetails-content-left{
        width: 60%;
        border-radius: 40px;
        height: 452px;
        label{
            display: flex;
            width: 100%;
            height: 452px;
            align-items: center;
            justify-content: center;
            flex-wrap: wrap;
            background-size: 100%;
            background-repeat: no-repeat;
            border-radius: 40px;
            overflow: hidden;
            
            // background: rgba(0, 0, 0, 0.5);
            span{
                width: 100%;
                text-align: center;
                color: #ffffff;
            }
        }
    }
    .left-tltie{
        font-size: 24px;
    }
    .Teachingcentercoursedetails-content-left-Isend{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        span{
            margin-top: 30px;
        }
        img{
            width: 36px;
            height: 36px;
        }
    }
    .obj{
        img{
            width: 61px!important;
            height: 61px!important;
            cursor: pointer;
        }
    }
    .Teachingcentercoursedetails-content-left-infos{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        background: rgba(0, 0, 0,0.2);
        img{
            width: 36px;
            height: 36px;
        }
    }
    .Teachingcentercoursedetails-content-left>label>div>p{
        font-size: 18px;
        color: #FFFFFF;
        width: 100%;
        text-align: center;
        span{
            display: inline-block;
            width: 10%;
            color: #2ECFD0;
            font-size: 22px;
            font-weight: bold;
        }
    }
    .toInfos{
        width: 30%!important;
        height: 50px;
        border:1px solid rgba(255,255,255,1);
        border-radius:24px;
        line-height: 50px;
        font-size: 18px;
        cursor: pointer;
    }
    .Teachingcentercoursedetails-content-right{
        width: 36%;
        display: flex;
        flex-wrap: wrap;
        height: 60%;
        label{
            width: 100%;
            height: 40px;
        }
    }
    .ClassInfos{
        color: #2B2B2B;
        font-size: 28px;
        font-weight: bold;

    }
    .typeimgsa{
        width: 100%;
        img{
            width: 30%;
        }
    }
    .ClassInfosmember{
        width: 100%;
        span{
            display: inline-block;
            width: 22%;
        }
    }
    .ClassInfostimes{
        width: 100%;
        span{
            display: inline-block;
            width: 30%;
        }
    }
    .Teachingcentercoursedetails-footes{
        position: relative;
        width: 88%;
        margin: 0 auto;
        margin-top: 40px;
        display: flex;
        div{
            width: 50%;
            display: flex;
            flex-wrap: wrap;
            margin-top: 30px;
            p{
                width: 100%;
                color: #2B2B2B;
                font-size: 16px;
                font-weight: bold;
                margin: 0 auto;
            }
        }
    }
    .footes-infos{
        width: 100%!important;
        cursor: pointer;
    }
    .footes-infos>label{
        width: 40%;
        img{
            width: 100%;
            border-radius: 20px;
        }
    }
    .footes-infos>label>label{
        display: flex;
        width: 100%;
        height: 40px;
        flex-wrap: wrap;
        padding-left: 6%;
        &:first-child{
            span{
                width: 100%!important;
            }
        }
        span{
            display: inline-block;
            width: 40%;
            height: 40px;
            line-height: 40px;
            color: #A8A8A8;
            font-size: 12px;
        }
    }
    .info-Class>span{
        color: #2D2D2D!important;
        font-size: 16px!important;
    }
    .classteacher>label{
        position: relative;
        width: 100%;
        height: 138px;
        border:1px solid rgba(70,204,205,1);
        border-radius:15px;
        margin-top: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        pointer-events: auto;
    }
    .classteacher>label>label{
        width: 33%;
        img{
            width: 65px;
            height: 65px;
            border-radius: 30px;
            text-align: center;
        }
        span{
            display: inline-block;
            width: 100%;
            text-align: center;
        }
    }
    .classteacher-info{
        span{
            text-align: left!important;
            height: 40px;
            line-height: 40px;
            &:first-child{
                color: #2B2B2B!important;
                font-size: 16px;
                font-weight: bold;
            }
            &:last-child{
                color: #A8A8A8;
                font-size: 12px;
            }
        }
    }
    .Teachingcentercoursedetails-language{
        color: #A8A8A8;
    }
    .introduction{
        position: relative;
        width: 90%;
        margin: 0 auto;
        margin-top: 40px;
    }
    .introduction>span{
        display: block;
        color: #2B2B2B;
        font-size: 16px;
        font-weight: bold;
        width: 100%;
    }
    .introduction>ul{
        display: flex;
        width: 100%;
        padding: 0;
        list-style: none;
        flex-wrap: wrap;
        li{
            // width: 30%;
            height: 170px;
            margin-left: 3%;
            margin-top: 20px;
            // &:first-child{
            //     margin-left: 0;
            // }
            // &:nth-child(4){
            //     margin-left: 0;
            // }
            // &:nth-child(7){
            //     margin-left: 0;
            // }
            img{
                width:247px;
                height:168px;
                // width:auto;
                // height: auto;
                // max-width: 100%;
                // max-height: 100%;
                border-radius: 20px;
            }
        }
    }


    .lecturersdetialcommit{
        position: relative;
        width: 90%;
        margin: 0 auto;
        margin-top: 40px;
    }
    .lecturersdetialcommit>span{
        display: block;
        color: #2B2B2B;
        font-size: 16px;
        font-weight: bold;
        width: 100%;
    }
    .lecturersdetialcommit>ul{
        display: flex;
        width: 100%;
        padding: 0;
        list-style: none;
        flex-wrap: wrap;
        li{
            height: 170px;
            margin-top: 20px;
            &:first-child{
                margin-left: 0;
            }
            &:nth-child(4){
                margin-left: 0;
            }
            &:nth-child(7){
                margin-left: 0;
            }
            img{
                width:33px;
                height:33px;
                border-radius: 20px;
            }
        }
    }
    .lecturersdetial-commit{
        display: flex;
        width: 100%;
        list-style: none;
        flex-wrap: wrap;
        padding: 0;
        li{
            width: 100%;
        }
    }




    //评论
    .comments-content{
        position: relative;
        width: 86%;
        margin:  0 auto;
    }
    .comments-content>label{
        display: flex;
        width: 100%;
        flex-wrap: wrap;
        margin-top: 30px;
        img{
            width: 34px;
            height: 34px;
            border-radius: 20px;
        }
    }
    .comments-content>label>label,.reply-content>label>label{
        display: flex;
        width: 78%;
        height: 60px;
        align-items: center;
        font-size: 12px;
        &:first-child{
            width: auto;
        }
        &:last-child{
            width: 80%;
            display: flex;
            flex-wrap: wrap;
            span{
                display: inline-block;
                width: 60%;
                height: 20px;
                line-height: 20px;
                margin-left: 2%;
                &:first-child{
                    width: auto;
                }
                &:last-child{
                    color: #C2C2C2;
                }
            }
        }
    }
    .reply-content{
        position: relative;
        width: 76%;
        margin:  0 auto;
    }
    .reply-content>label{
        display: flex;
        width: 100%;
        flex-wrap: wrap;
        min-height: 100px;
        align-items: center;
        background:rgba(246,246,246,1);
        border-radius: 10px;
        img{
            width: 34px;
            height: 34px;
            border-radius: 20px;
            margin-left: 20px;
        }
    }
    .reply-infos{
        width: 80%;
        display: flex;
        flex-wrap: wrap;
        
        align-items: center;
        span{
            width: auto!important;
        }
    }
    .replaystimed{
        width: 80%!important;
        color: #C2C2C2;
    }
    .load-more{
        position: relative;
        width: 100%;
        height: 40px;
        margin-top: 40px;
        text-align: center;
        cursor: pointer;
        line-height: 40px;
        color: #30C4C4;
        font-size: 14px;
    }
    .toreplys{
        margin-left: auto!important ;
        cursor: pointer;
    }
    .toreplys:hover{
        color: red;
    }
    .thereplaysinput{
        position: relative;
        width: 100%;
        /deep/.el-input{
            width: 60%;
            margin-top: 10px;
            margin-left: 2%;
        }
        
    }
    .thereplaysinput>span{
        display: inline-block;
        width: 16%!important;
        height: 40px!important;
        text-align: center!important;
        line-height: 40px!important;
        background: #44c7c7!important;
        border-radius: 10px!important;
        margin-left: 2%!important;
        color: #FFFFFF!important;
        font-size: 12px!important;
        cursor: pointer;
    }
</style>